<template>
    <div class="icons">
      <swiper > 
          <swiper-slide v-for="(page,index) of pages" :key="index">
        <div class="icon" v-for="item of page" :key="item.id">

                <div class="iconImg">
                    <img class="icon-img-content" :src="item.url" alt="">
                </div>
                <p class="icon-desc">{{item.message}}</p>
        </div>
         </swiper-slide>
      </swiper>
    </div>
</template>

<script>
export default {
    name: "HomeIcons",
    data(){
        return {
            imgList:[
                {   id:"001",
                    url:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
                    message:"景点门票"
                },{  id:"002",
                    url:"http://img1.qunarzz.com/piao/fusion/1803/20/831d62d2e1c7be02.png",
                    message:"文化古迹"
                },
                {    id:"003",
                    url: "http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png",
                    message:"演出"
                },{  id:"004",
                    url:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
                    message:"演出"
                },{  id:"005",
                    url:"http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
                    message:"一日游"
                },{  id:"006",
                    url:"http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
                    message:"西安必游"
                },{  id:"007",
                    url:"http://img1.qunarzz.com/piao/fusion/1811/5e/c640ec3b7d7ae802.png",
                    message:"植物园"
                },{  id:"008",
                    url:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
                    message:"打卡圣地"
                },
                {    id:"009",
                    url: "http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png",
                    message:"演出"
                }             
            ]
        }
    },
    computed: {
        pages(){
           const pages = [];
           this.imgList.forEach((item,index)=>{
               const page = Math.floor(index / 8)
               if (!pages[page]){
                   pages[page] = []
               }
               pages[page].push(item)
           })
           return pages
        }
    }
}
</script>

<style lang="stylus" scoped>
   .icons >>> .swiper-container
     height: 0
     padding-bottom: 50%
     .icon
       heightL 0
       position: relative
       overflow: hidden
       float: left
       width: 25%
       padding-bottom: 25%
       .iconImg
          position: absolute
          top: 0
          left: 0
          right: 0
          bottom: .38rem
          box-sizing: border-box
          padding: .1rem
          .icon-img-content
            display:block
            margin: 0 auto
            height: 100%
       .icon-desc
         width: 100%
         position: absolute
         left: 0
         left: 0
         bottom: 0
         line-height: .44rem
         height: .44rem
         color: #333
         text-align:center
</style>
